<template>
    <div class="container">
        <div id="Home_page">
            <div><span id="back_home" class="iconfont icon-fanhui">回到首页</span></div>
        </div>
        <div class="login_box">
            <form action="">

                <h2>登录</h2>
                <div class="input_box">
                    <span><i class="iconfont icon-yonghu"></i></span>
                    <input type="text" id="username" placeholder="账号" required v-model="username">
                </div>
                <div class="input_box">
                    <span><i class="iconfont icon-mima"></i></span>
                    <input type="password" id="password" placeholder="密码" required v-model="password">
                </div>
                <div class="remember_forgot">
                    <label for="remember"><input type="checkbox" name="" id="">记住密码</label>
                    <a href="#">忘记密码?</a>
                </div>

                <input style="cursor: pointer;" type="button" value="登录" @click="login" class="login">
                <!-- <div class="register_link">
                    <a href="#" @click="router.push('/register')">使用手机号登录</a>
                </div> -->
            </form>
        </div>
    </div>
</template>

<script setup>
import axios from "../utils/http.js";
import { ref } from "vue"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus";
let router = useRouter()
let username = ref("")
let password = ref("")

function login() {
    axios({
        method: "post",
        url: "/login/",
        data: {
            name: username.value,
            pwd: password.value
        }
    }).then(res => {
        console.log(res.data)
        if (res.data.code == 200) {
            localStorage.setItem('username', username.value)
            localStorage.setItem('token', res.data.token)
            let role = res.data.role
            ElMessage({
                message: '登录成功',
                type: 'success',
            })
            if (role == '管理员') {
                router.push('/admin')
            } else if (role == '学生') {
                router.push('/student')
            } else if (role == '班主任') {
                router.push('/c_teacher')
            } else if (role == '老师') {
                router.push('/teacher')
            } else if (role == '院长') {
                router.push('/dean')
            } else if (role == '校长') {
                router.push('/rector')
            } else if (role == '市场') {
                router.push('/markheader')
            }
        } else {
            ElMessage({
                message: res.data.msg,
                type: 'error',
            })
        }
    }).catch(err => {
        console.log("失败》》》", err)
    })
}
</script>

<style scoped>
@import url('https://at.alicdn.com/t/c/font_4437435_tljsy6ioilq.css');

#Home_page {
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(110, 110, 110, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(15px);
    justify-content: space-between;
}

#Home_page div {
    color: white;
    margin-left: 40px;
    line-height: 50px;
}

.iconfont {
    color: #fff;
    font-size: 16px;
    line-height: 50px;
}

#back_home:hover {
    text-decoration: underline;
    cursor: pointer;
}

.container {
    width: 100%;
    min-height: 100vh;
    background: url("../assets/forest.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .login_box {
    position: absolute;
    width: 390px;
    height: 420px;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(15px);
}

.login_box h2 {
    font-size: 28px;
    text-align: center;
    color: #fff;
}

.login_box .input_box {
    position: relative;
    width: 310px;
    margin: 30px 0;
    border-bottom: 2px solid #fff;
}

.input_box input {
    width: 100%;
    height: 50px;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: #fff;
    padding: 0 35px 0 5px;
}

.input_box input::placeholder {
    color: #fff;
}

.input_box .iconfont {
    position: absolute;
    right: 10px;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
}

.remember_forgot {
    margin: -15px 0 15px;
    font-size: 15px;
    color: #fff;
    display: flex;
    justify-content: space-between;
}

.remember_forgot label input {
    margin-right: 5px;
}

.login_box button {
    width: 100%;
    height: 40px;
    background: #fff;
    border: none;
    outline: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: 17px;
    color: #000;
    transition: all 0.1s;
}

.login_box button:hover {
    color: #fff;
    background: rgb(70, 149, 84);

}

.register_link {
    color: #fff;
    font-size: 15px;
    text-align: center;
    margin: 20px 0 10px;
}

.remember_forgot a,
.register_link a {
    color: #fff;
    text-decoration: none;
}

.remember_forgot a:hover,
.register_link a:hover {
    text-decoration: underline;
}

.login {

    width: 100px;
    height: 40px;
    background-color: transparent;
    color: white;
    border: 0px;
    font-size: 28px;
    margin-left: 110px;

}
</style>